<template>
	<view class="yzm-login-container">

		<view class="title">
			验证码登录
		</view>
		<view class="desc">
			请输入手机号获取短信息验证码
		</view>

		<view class="input-item">
			<view class="cuIcon-mobilefill icon"></view>
			<view class="phone-desc">
				<text>+86</text>
				<text class="cuIcon-unfold"></text>
			</view>
			<input v-model="loginForm.username" class="input" type="text" placeholder="请输入手机号" maxlength="11" />
			<view class="rule-text">
				{{formRule.usernameRule}}
			</view>
		</view>
		<view class="input-item ">
			<view class="cuIcon-safe icon"></view>
			<input v-model="loginForm.yzm" class="input yzm-inp" type="text" placeholder="请输入验证码" maxlength="8" />
			<view class="yzm-text" v-if="isGetYzm" @click="getYzm">
				获取验证码
			</view>
			<view class="yzm-text num" v-else>
				请在{{yzmNum}}秒后重试
			</view>
			<view class="rule-text">
				{{formRule.yzmRule}}
			</view>
		</view>

		<button :class="loading ?'loading':''" class="zx-btn login-btn" @click="login">登录</button>
		<view class="pwn" @click="openPwnPage"><text>使用账号密码登录</text></view>

	</view>
</template>

<script>
	let rule = getApp().globalData.config.rule
	export default {
		data() {
			return {
				isPwnStatus: true,
				isGetYzm:true,
				yzmNum:10,
				loading:false,//请求加载中
				loginForm: {
					username: "",
					yzm: "",

				},
				formRule: {
					usernameRule: "",
					yzmRule: ""
				}
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			//获取验证码
			getYzm(){
				this.isGetYzm=false
				let time=setInterval(()=>{
					this.yzmNum--
					if(this.yzmNum==0){
						clearInterval(time)
						this.isGetYzm=true;
						this.yzmNum=10;
					}
				},1000)
				//获取请求接口
				
			},
			openPwnPage() {
				uni.redirectTo({
					url: "/pages/pwn-login"
				})
			},
			login() {
				if (this.verify()) {
					this.loading = true
					setTimeout(() => {
						this.loading = false
					}, 2000)


				}


			},
			//验证规则
			verify() {
				let keys = Object.keys(this.formRule);
				let num = 0;
				
				if (!rule.phone.test(this.loginForm.username)) {
					
					this.formRule.usernameRule = "请输入正确手机号"

				} else {
					this.formRule.usernameRule = ""
					num++
				}
				
				if (!this.loginForm.yzm) {
					this.formRule.yzmRule = "请输入正确的验证码!"
				} else {
					this.formRule.yzmRule = ""
					num++
				}

				return (num >= keys.length);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yzm-login-container {
		width: 100%;
		padding: 0 48rpx;

		.title {
			text-align: center;
			margin-top: 80rpx;
			font-size: 56rpx;
			color: #000000;
		}

		.desc {
			margin-top: 16rpx;
			text-align: center;
			font-size: 26rpx;
			color: #969799;
		}



		.login-btn {
			margin-top: 164rpx;
			letter-spacing: 12rpx;
		}

		.pwn {
			margin-top: 48rpx;
			text-align: center;
			color: #0973F4;


		}
	}
</style>